<template>
  <div class="app-container">
    <el-button
      v-show="userManage_add"
      type="primary"
      size="small"
      icon="el-icon-circle-plus-outline"
      @click="addUser"
    >新增</el-button>
    <div class="app-table">
      <el-table
        :data="list"
        border
        style="width: 100%"
      >
        <el-table-column label="ID">
          <template slot-scope="scope">
            {{ scope.row.userId }}
          </template>
        </el-table-column>
        <el-table-column label="昵称">
          <template slot-scope="scope">
            {{ scope.row.userName }}
          </template>
        </el-table-column>
        <el-table-column label="关联角色">
          <template slot-scope="scope">
            {{ scope.row.roleName }}
          </template>
        </el-table-column>
        <el-table-column label="备注">
          <template slot-scope="scope">
            <el-popover
              v-if="scope.row.remark"
              :content="scope.row.remark"
              placement="top"
              trigger="hover">
              <span slot="reference" style="cursor:pointer" type="info">{{ scope.row.remark }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            {{ scope.row.status === '0' ? '生效' : '失效' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="400">
          <template slot-scope="scope">
            <el-button
              v-show="userManage_edit"
              type="primary"
              plain
              size="mini"
              icon="el-icon-third-edit"
              @click="editUser(scope.row)"
            >编辑/查看</el-button>
            <el-button
              v-show="userManage_dele"
              type="primary"
              plain
              size="mini"
              icon="el-icon-third-delete"
              @click="deleteUser(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          :current-page.sync="pageid"
          :page-sizes="[10,50,100]"
          :page-size="pagecount"
          :total="count"
          background
          highlight-current-row
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <edit-user :dialog-table-visible="dialogTableVisible" :scope="scope" :add-scope="addScope" @closeDialog="closeDialog"/>
  </div>
</template>
<script>
import { getList, deleteUser } from '@/api/userManage'
import secret from '@/utils/secret'
import { mapGetters } from 'vuex'
import EditUser from './components/edit.vue'
export default {
  name: 'UserManage',
  components: {
    EditUser: EditUser
  },
  data() {
    return {
      list: null,
      pageid: 1, // 当前页数
      pagecount: 10, // 每页显示条数
      count: 0, // 总数量
      pages: null, // 总页数
      dialogTableVisible: false, // 遮罩
      scope: null, // 传值_编辑时
      addScope: false, // 传值_增加时
      power: null, // 权限
      userManage_add: false, // 新增
      userManage_edit: false, // 编辑
      userManage_dele: false, // 删除
      flag: true
    }
  },
  computed: {
    ...mapGetters(['assignment', 'token'])
  },
  mounted() {
    this.loadList(1)
    this.dialogTableVisible = false
    // 按钮权限
    var that = this
    console.log(this.assignment)
    this.assignment.forEach(function(item) {
      if (!!item) { // eslint-disable-line
        if (item.menuCode === 'userManage') {
          that.power = item.btnList
        }
      }
    })
    this.power.forEach(function(item) {
      if (!!item) { // eslint-disable-line
        if (item.code === 'userManage_add') {
          that.userManage_add = true
        }
        if (item.code === 'userManage_edit') {
          that.userManage_edit = true
        }
        if (item.code === 'userManage_dele') {
          that.userManage_dele = true
        }
      }
    })
  },
  methods: {
    // 请求数据列表
    loadList(num) {
      var data = {
        // token: this.token,
        pageid: num,
        pagecount: this.pagecount
      }
      console.log('请求参数')
      console.log(data)
      getList(secret.Encrypt(data)).then(response => {
        console.log('返回数据')
        console.log(response)
        this.list = response.data.list // 列表项
        this.count = parseInt(response.data.count) // 总数量
        console.log(response.data)
      }).catch(() => {
        this.$message({
          message: '请求列表失败，请重试',
          type: 'error'
        })
      })
    },
    // 当前页面改变时
    handleSizeChange(num) {
      this.flag = false
      this.pagecount = num
      console.log(num)
      const data = {
        // token: this.token,
        pageid: 1,
        pagecount: parseInt(num)
      }
      console.log('请求参数')
      console.log(data)
      getList(secret.Encrypt(data)).then(response => {
        this.flag = true
        console.log('返回数据')
        console.log(response)
        this.pageid = 1
        this.list = response.data.list // 列表项
        this.count = parseInt(response.data.count) // 总数量
        console.log(response.data)
      }).catch(() => {
        this.$message({
          message: '请求列表失败，请重试',
          type: 'error'
        })
      })
    },
    // 跳转某页
    handleCurrentChange(num) {
      const data = {
        // token: this.token,
        pageid: num,
        pagecount: this.pagecount
      }
      console.log('请求参数')
      console.log(data)
      // if (this.flag === true) {
      getList(secret.Encrypt(data)).then(response => {
        console.log('返回数据')
        console.log(response)
        this.list = response.data.list // 列表项
        this.count = parseInt(response.data.count) // 总数量
        this.pageid = num // 当前页数
        console.log(response.data)
      }).catch(() => {
        this.$message({
          message: '请求列表失败，请重试',
          type: 'error'
        })
      })
      // }
    },
    // 删除角色
    deleteUser(scope) {
      this.$confirm('确定进行用户删除操作吗?删除后，该用户将不可用', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          // token: this.token,
          userId: scope.userId
        }
        console.log('请求参数')
        console.log(data)
        deleteUser(secret.Encrypt(data)).then((response) => {
          console.log('返回数据')
          console.log(response)
          if (response.resultCode === '0000') {
            this.$message({
              message: response.resultDesc,
              type: 'success'
            })
            // 删除本页最后一条bug
            const pages = (this.count - 1) % this.pagecount
            if (pages === 0) {
              if (this.pageid > 1) {
                this.handleCurrentChange(parseInt(this.pageid - 1))
              } else {
                this.handleCurrentChange(parseInt(this.pageid))
              }
            } else if (pages > 0) {
              this.handleCurrentChange(this.pageid)
            }
          } else {
            this.$message({
              message: response.resultDesc,
              type: 'error'
            })
          }
        })
      }).catch(() => {
        console.log('删除取消')
      })
    },
    // 编辑角色
    editUser(scope) {
      this.dialogTableVisible = true
      this.scope = scope
    },
    // 新增角色
    addUser() {
      this.dialogTableVisible = true
      this.addScope = true
    },
    // 遮罩子组件回调
    closeDialog() {
      this.dialogTableVisible = false
      this.addScope = false
      this.handleCurrentChange(this.pageid)
    }
  }
}
</script>
<style scoped>

</style>
